<template>
  <div class="heroinfo-container titlebar-page">
    <TitleBar>
      <div class="tab-wrapper" slot=rest>
        <tab :active-color="colors.white" class="home-tabbar" :line-width="2" custom-bar-width="30px" :bar-active-color="colors.white" :scroll-threshold="7">
          <tab-item :selected="tabSelected === i" v-for="(item, i) of tabList" :key="i" @on-item-click="onTabClicked(item, i)">{{item.text}}</tab-item>
        </tab>
      </div>
    </TitleBar>

    <div class="hero-list-wrapper">
      <ul class="hero-list">
        <li @click="gotoHeroDetails(item)" v-for="(item, i) of filteredHeroList" :key="i" class="hero-item">
          <x-img  :default-src="require('../../assets/images/default-card.png')" :src="item.cardUrl" alt="" class="image"/>
          <div class="info">
            <div class="name">{{item.realName}}</div>
            <div class="type">{{item.heroType | HeroType}}</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import TitleBar from '../../components/TitleBar';
import {colors} from '../../utils/theme';
import {mapState} from 'vuex';
import {XImg} from 'vux';
export default {
  data() {
    return {
        colors,
        tabSelected: 0,
        tabList: [{
          text: '全部',
          value: 0
        },{
          text: '坦克',
          value: 1
        },{
          text: '战士',
          value: 2
        },{
          text: '刺客',
          value: 3
        },{
          text: '法师',
          value: 4
        },{
          text: '射手',
          value: 5
        },{
          text: '辅助',
          value: 6
        }]
    };
  },
  computed: {
    ...mapState(['hero_list']),
    filteredHeroList: function() {
      return this.hero_list.filter((item)=>{
        if(this.tabSelected === 0) {
          return true;
        }
        return this.tabSelected === item.heroType
      })
    }
  },
  mounted() {
    
  },
  methods: {
    onTabClicked(item) {
      this.tabSelected = item.value;
    },
    gotoHeroDetails(item) {
      this.$router.push({name: 'HeroDetails', params: {heroItem: item}});
    }
  },
  components: {
    TitleBar,
    XImg
  }
};
</script>

<!-- v-html 中的内容不含在scope中  不能加scoped-->
<style lang="less">
.heroinfo-container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  .tab-wrapper {
    width: 100%;
  }

  .hero-list-wrapper {
    width: 100%;
    padding: 4px;
    z-index: -1;
    .hero-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      .hero-item {
        flex-basis: 30%;
        flex-shrink: 30%;
        height: 8rem;
        border: 1px solid #666;
        border-top-right-radius: 8px;
        border-bottom-left-radius: 8px;
        position: relative;
        overflow: hidden;
        padding: 1px;
        display: flex;
        align-items: flex-end;
        margin-right: 6px;
        margin-bottom: 6px;
        .image {
          position: absolute;
          width: 99%;
          height: 99%;
          top: 1px;
          left: 1px;
          right: 1px;
          bottom: 1px;
          border-top-right-radius: 8px;
          border-bottom-left-radius: 8px;
        }
        .info {
          flex: 1;
          display: flex;
          justify-content: center;
          flex-direction: column;
          align-items: center;
          height: 3.2rem;
          background-color: rgba(0,0,0,0.4);
          position: relative;
          bottom: 0;
        }
        .name {
          color: white;
          font-size: 1rem;
        }
        .type {
          color: aqua;
          font-size: 0.8rem;
        }
      }
    }
  }
}
</style>
